<template>
	<view class="out">
		<!-- 
			使用@input实现双向绑定
			 <input type="text" :value="inputValue" @focus="onFocus" @blur="onBlur" @input="onInput"/>
		 -->
		 
		 <!-- 使用v-model实现双向绑定 -->
		<input type="text" v-model="inputValue" />
	</view>
	
	<view>预览：{{ inputValue }}</view>
</template>

<script setup>
import { ref } from 'vue';

const inputValue = ref("")

// 获取焦点
const onFocus = (e) => {
	console.log("获取焦点", e)
}

// 失去焦点
const onBlur = (e) => {
	console.log("失去焦点", e)
}

// 当键盘输入时，触发input事件
const onInput = (e) => {
	console.log("键盘正在输入", e)
	inputValue.value = e.detail.value
}
</script>

<style scoped lang="scss">
.out{
	padding: 0 20px;
	margin-top: 40px;
	input{
		border: 1px solid #ccc;
		height: 40px;
	}
}
</style>
